<template>
	<div class="main-content">
		<!-- row-f01 -->
		<div class="row-f01">
			<div class="wp">
				<!-- m-table01 -->
				<div class="m-table01">
				  <el-tabs v-model="activeName" @tab-click="tabChange">
				    <el-tab-pane label="新币榜" name="tab01">
				    	<div class="table">
								<el-table
						      :data="tableData"
						      style="width: 100%"
						      @row-click="tableRowClick"
					      >
						      <el-table-column
						        prop="type"
						        label="币种"
						        class-name="firstChild"
					        >
						      </el-table-column>
						      <el-table-column
						        prop="now"
						        label="最新价"
					        >
					        	<template slot-scope="scope">
					        		<p class="now">₮{{scope.row.now}}<span>￥{{scope.row.up}}</span></p>
					        	</template>
						      </el-table-column>
						      <el-table-column
						        prop="rate"
						        label="24H涨跌幅"
						        align="right"
					        >
					        	<template slot-scope="scope">
					        		<p :class="['rate', scope.row.rate.indexOf('+') >= 0 ? 'index-green' : 'index-red']">{{scope.row.rate}}<span>{{scope.row.rateUp}}</span></p>
					        	</template>
						      </el-table-column>
						      <el-table-column
						        prop="low"
						        label="24H最低"
						        align="right"
					        >
					        	<template slot-scope="scope">
					        		<p class="low">₮{{scope.row.low}}</p>
					        	</template>
						      </el-table-column>
						      <el-table-column
						        prop="high"
						        label="24H最高"
						        align="right"
					        >
					        	<template slot-scope="scope">
					        		<p class="high">₮{{scope.row.high}}</p>
					        	</template>
						      </el-table-column>
						      <el-table-column
						        label="操作"
						        align="right"
						        class-name="lastChild"
					        >
					        	<template slot-scope="scope">
					        		<div class="g-button01" @click="goto({name: ''})"></div>
					        	</template>
						      </el-table-column>
						    </el-table>
					  	</div>
				    </el-tab-pane>
				    <el-tab-pane label="24H涨幅榜" name="tab02">
				    	<div class="table">
								<el-table
						      :data="tableData1"
						      style="width: 100%"
						      @row-click="tableRowClick"
					      >
						      <el-table-column
						        prop="type"
						        label="币种"
						        class-name="firstChild"
					        >
						      </el-table-column>
						      <el-table-column
						        prop="now"
						        label="最新价"
					        >
					        	<template slot-scope="scope">
					        		<p class="now">₮{{scope.row.now}}<span>￥{{scope.row.up}}</span></p>
					        	</template>
						      </el-table-column>
						      <el-table-column
						        prop="rate"
						        label="24H涨跌幅"
						        align="right"
					        >
					        	<template slot-scope="scope">
					        		<p :class="['rate', scope.row.rate.indexOf('+') >= 0 ? 'index-green' : 'index-red']">{{scope.row.rate}}<span>{{scope.row.rateUp}}</span></p>
					        	</template>
						      </el-table-column>
						      <el-table-column
						        prop="low"
						        label="24H最低"
						        align="right"
					        >
					        	<template slot-scope="scope">
					        		<p class="low">₮{{scope.row.low}}</p>
					        	</template>
						      </el-table-column>
						      <el-table-column
						        prop="high"
						        label="24H最高"
						        align="right"
					        >
					        	<template slot-scope="scope">
					        		<p class="high">₮{{scope.row.high}}</p>
					        	</template>
						      </el-table-column>
						      <el-table-column
						        label="操作"
						        align="right"
						        class-name="lastChild"
					        >
					        	<template slot-scope="scope">
					        		<div class="g-button01" @click="goto({name: ''})"></div>
					        	</template>
						      </el-table-column>
						    </el-table>
					  	</div>
				    </el-tab-pane>
				  </el-tabs>
				</div>
				<!-- m-table01 end -->
			</div>			
		</div>
		<!-- row-f01 end -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
        activeName: 'tab01',
        tableData: [
        	{
	          type: 'AMBR/USDT',
	          now: '0.00100000',
	          up: "0.01",
	          rate: '+0%',
	          rateUp: "+0.000",
	          low: '0.00100000',
	          high: '0.00100000',
	        },
        	{
	          type: 'AMBR/USDT',
	          now: '0.00100000',
	          up: "0.01",
	          rate: '-0%',
	          rateUp: "-0.000",
	          low: '0.00100000',
	          high: '0.00100000',
	        },
        	{
	          type: 'AMBR/USDT',
	          now: '0.00100000',
	          up: "0.01",
	          rate: '+0%',
	          rateUp: "+0.000",
	          low: '0.00100000',
	          high: '0.00100000',
	        },
        	{
	          type: 'AMBR/USDT',
	          now: '0.00100000',
	          up: "0.01",
	          rate: '+0%',
	          rateUp: "+0.000",
	          low: '0.00100000',
	          high: '0.00100000',
	        },
        	{
	          type: 'AMBR/USDT',
	          now: '0.00100000',
	          up: "0.01",
	          rate: '+0%',
	          rateUp: "+0.000",
	          low: '0.00100000',
	          high: '0.00100000',
	        },
        	{
	          type: 'AMBR/USDT',
	          now: '0.00100000',
	          up: "0.01",
	          rate: '+0%',
	          rateUp: "+0.000",
	          low: '0.00100000',
	          high: '0.00100000',
	        },
        	{
	          type: 'AMBR/USDT',
	          now: '0.00100000',
	          up: "0.01",
	          rate: '+0%',
	          rateUp: "+0.000",
	          low: '0.00100000',
	          high: '0.00100000',
	        },
        	{
	          type: 'AMBR/USDT',
	          now: '0.00100000',
	          up: "0.01",
	          rate: '+0%',
	          rateUp: "+0.000",
	          low: '0.00100000',
	          high: '0.00100000',
	        },
        	{
	          type: 'AMBR/USDT',
	          now: '0.00100000',
	          up: "0.01",
	          rate: '+0%',
	          rateUp: "+0.000",
	          low: '0.00100000',
	          high: '0.00100000',
	        },
        	{
	          type: 'AMBR/USDT',
	          now: '0.00100000',
	          up: "0.01",
	          rate: '+0%',
	          rateUp: "+0.000",
	          low: '0.00100000',
	          high: '0.00100000',
	        }
        ],
        tableData1: [
        	{
	          type: 'AMBR/USDT',
	          now: '0.00100000',
	          up: "0.01",
	          rate: '+0%',
	          rateUp: "+0.000",
	          low: '0.00100000',
	          high: '0.00100000',
	        },
        	{
	          type: 'AMBR/USDT',
	          now: '0.00100000',
	          up: "0.01",
	          rate: '-0%',
	          rateUp: "-0.000",
	          low: '0.00100000',
	          high: '0.00100000',
	        },
        	{
	          type: 'AMBR/USDT',
	          now: '0.00100000',
	          up: "0.01",
	          rate: '+0%',
	          rateUp: "+0.000",
	          low: '0.00100000',
	          high: '0.00100000',
	        },
        	{
	          type: 'AMBR/USDT',
	          now: '0.00100000',
	          up: "0.01",
	          rate: '+0%',
	          rateUp: "+0.000",
	          low: '0.00100000',
	          high: '0.00100000',
	        },
        	{
	          type: 'AMBR/USDT',
	          now: '0.00100000',
	          up: "0.01",
	          rate: '-0%',
	          rateUp: "-0.000",
	          low: '0.00100000',
	          high: '0.00100000',
	        },
        	{
	          type: 'AMBR/USDT',
	          now: '0.00100000',
	          up: "0.01",
	          rate: '+0%',
	          rateUp: "+0.000",
	          low: '0.00100000',
	          high: '0.00100000',
	        },
        	{
	          type: 'AMBR/USDT',
	          now: '0.00100000',
	          up: "0.01",
	          rate: '+0%',
	          rateUp: "+0.000",
	          low: '0.00100000',
	          high: '0.00100000',
	        },
        	{
	          type: 'AMBR/USDT',
	          now: '0.00100000',
	          up: "0.01",
	          rate: '-0%',
	          rateUp: "-0.000",
	          low: '0.00100000',
	          high: '0.00100000',
	        },
        	{
	          type: 'AMBR/USDT',
	          now: '0.00100000',
	          up: "0.01",
	          rate: '+0%',
	          rateUp: "+0.000",
	          low: '0.00100000',
	          high: '0.00100000',
	        },
        	{
	          type: 'AMBR/USDT',
	          now: '0.00100000',
	          up: "0.01",
	          rate: '+0%',
	          rateUp: "+0.000",
	          low: '0.00100000',
	          high: '0.00100000',
	        }
        ]
			}
		},
		created() {
		},
		methods: {
			//TODO 点击表格执行跳转操作
			tableRowClick(row, column, event) {
				
			},

			tabChange() {

			},
			// 跳转页面
			// obj: 跳转页面的参数
			goto(obj) {
				this.$router.push(obj);
			}
		}
	}
</script>

<style>
</style>
